<template>
<div class="commentListOne">
    <!-- 单个评论模块的上面的用户头像，用户名字，和时间 -->
    <div class="commentTopic">
        <div class="img_name">
            <img class="img" src="../../../assets/image/home/guessLove/2.png">
            <p>张张张</p>
        </div>
        <div class="topTime">2019年09月31日</div>
    </div>
    <!-- 商品的名字 -->
    <div class="goodsName">唐人福无添加蔗糖蛋糕</div>
    <!-- 评论的内容 -->
    <div class="commentContent">评论的内评论的内评论的内评论的内容商品很不错很不错很不错本不错</div>
    <!-- 放置图片 -->
    <div class="commentContentImg">
        <img class="img1" src="../../../assets/image/home/guessLove/2.png">
        <img class="img1" src="../../../assets/image/home/guessLove/2.png">
        <img class="img1" src="../../../assets/image/home/guessLove/2.png">
        <img class="img1" src="../../../assets/image/home/guessLove/2.png">
    </div>
</div>
</template>

<script>
export default {
    name: "commentListOne",

}
</script>

<style scoped>
.commentListOne {
    width: 100%;
    border-bottom: 1px solid #ccc;
    
}
.commentListOne>*{
    margin-top: .2rem;
}
.commentTopic {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    align-content: center;
    height: 1rem;
    
}
.img_name{
    height: .8rem;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    color: #666666;
    font-size: .36rem;
    font-weight: 900;
}
.img {
    height: 100%;
    width: .8rem;
    border-radius: .4rem;
    margin-right: .3rem;
}
.topTime{
    height: .8rem;
    font-size: .36rem;
    color: #999999;
    display: -webkit-flex;
    display: flex;
    align-items: center;
}
.goodsName{
    font-size: .4rem;
    color: #333;
    font-weight: 900;

}.commentContent{
    font-size: .38rem;
    color: #666666;
    font-weight: 900;
}
.commentContentImg{
    width: 100%;
}
.img1{
    width: 30%;
    margin-left: 3%;
}
</style>
